<template>
    <div>
        <div class="page">

            <!-- 搜索部分 -->
            <heade v-if="false">
                <slot name="left-slot">
                    <el-input v-model="where.name"></el-input>
                </slot>
                <div class="add-btn unified-cursor-default" slot="right-slot">
                    <el-dropdown @command="add">
                        <span class="el-dropdown-link">
                            添加地区<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="a" disabled>添加国家</el-dropdown-item>
                            <el-dropdown-item command="province">添加省份</el-dropdown-item>
                            <el-dropdown-item command="city">添加城市</el-dropdown-item>
                            <el-dropdown-item command="urban">添加市区</el-dropdown-item>
                            <el-dropdown-item command="street" disabled>添加街道</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </heade>


            <div class="user-list unified-bg-white unifined-border-radius" >

                <div class="box-head flex unified-flex-space-between ">

                    <span class="box-head-title">Region List</span>

                    <div class="user-list-head-search-box flex ">
                        <div class="user-list-head-search">
                            <input type="" name="" id="" value="" class="user-list-head-search-input" />
                            <span class="user-list-head-search-btn el-icon-search"></span>
                        </div>

                        <!-- 添加按钮 -->
                        <span class="user-list-head-action-btn el-icon-circle-plus-outline" @click="add"></span>
                        <!-- 全选/反选 -->
                        <el-dropdown>
                            <span class="user-list-head-action-btn el-icon-more"></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>全选</el-dropdown-item>
                                <el-dropdown-item>反选</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>

                <!-- 筛选部分 -->
                <div class="unified-table-padding" v-loading="pageLoading">

                    <el-table :data="list" style="width: 100%;" row-key="_id" default-expand-all
                        :tree-props="{children: 'children'}">
                        <el-table-column prop="code" label="编码" width="140">
                        </el-table-column>
                        <el-table-column width="80">

                            <template slot="header">
                                <div class="tableHeader">
                                    <span>TYPE</span>
                                </div>
                            </template>
                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span>
                                        <el-tag effect="dark" size="small" :type="data.row.type | typeTag">
                                            {{ data.row.type | typeTitle}}
                                        </el-tag>
                                    </span>
                                </div>
                            </template>

                        </el-table-column>
                        <el-table-column prop="name" label="地区名称" width="180">


                            <template slot="header">
                                <div class="tableHeader">
                                    <span>Name</span>
                                </div>
                            </template>
                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span>
                                        {{data.row.name}}
                                    </span>
                                </div>
                            </template>


                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                        <el-table-column prop="addTime" label="add Time">


                            <template slot="header">
                                <div class="tableHeader">
                                    <span>addTime</span>
                                </div>
                            </template>

                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <i class="el-icon-time"></i>
                                    <span>{{data.row.addTime | turnTime}}</span>
                                </div>
                            </template>

                        </el-table-column>

                        <el-table-column prop="status" label="Status" width="80">
                            <template slot="header">
                                <div class="tableHeader">
                                    <span>Status</span>
                                </div>
                            </template>
                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span>
                                        <el-tag effect="plain" size="small" :type="data.row.status?'':'success'">
                                            {{ data.row.status?'关闭':'正常'}}
                                        </el-tag>
                                    </span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="address" label="操作" width="140">

                            <template slot="header">
                                <div class="tableHeader">
                                    <span>操作</span>
                                </div>
                            </template>

                            <template slot-scope="scope">
                                <div class="tableHeader flex unified-flex-space-between unified-flex-align">
                                    <el-button type="primary" size="mini" @click="edit(scope.row)">编辑
                                    </el-button>
                                    <el-button slot="reference" type="danger" size="mini" @click="remove(scope.row)">删除
                                    </el-button>

                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 商品列表 -->
                    <div class="unified-pagination unified-bg-white">
                        <el-pagination :page-sizes="[10]" :page-size="10" :current-page="page"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>


        </div>


    </div>
</template>

<script>
    import heade from '../../components/heade/heade.vue'
    import Mixin from '../../mixin/list.js'

    export default {

        components: {
            'heade': heade
        },
        filters: {
            typeTitle(type) {
                let region = [{
                        type: "province",
                        tag: "",
                        title: "省份"
                    },
                    {
                        type: "city",
                        tag: "success",
                        title: "城市"
                    },
                    {
                        type: "urban",
                        tag: "warning",
                        title: "市区"
                    },
                    {
                        type: "street",
                        tag: "",
                        title: "街道"
                    }
                ]
                return region.filter((item) => {
                    return item.type == type
                })[0].title
            },
            typeTag(type) {
                let region = [{
                        type: "province",
                        tag: "",
                        title: "省份"
                    },
                    {
                        type: "city",
                        tag: "success",
                        title: "城市"
                    },
                    {
                        type: "urban",
                        tag: "warning",
                        title: "市区"
                    },
                    {
                        type: "street",
                        tag: "",
                        title: "街道"
                    }
                ]
                return region.filter((item) => {
                    return item.type == type
                })[0].tag
            }
        },
        mixins: [Mixin],
        data() {
            return {
                // 请求地址
                api: this.$api.region,
                // 筛选条件
                where: {
                    name: ""
                },
            }

        },
        methods: {

            add() {
                this.$router.push({
                    path: '/Home/add/region',
                    query: {
                        mode: 1
                    }
                })
            },
            // 点击删除
            remove(data) {
                this.$confirm('确定要删除该地区吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let id = data._id
                    this.pageLoading = true
                    return this.$axios({
                        url: this.api,
                        method: "POST",
                        data: {
                            "action": "remove",
                            "params": {
                                id
                            }
                        }
                    })
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg)
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).finally(() => {
                    this.pageLoading = false
                })

            },
            // 点击编辑
            edit(data) {
                this.$router.push({
                    path: '/Home/transport/region_edit',
                    query: {
                        mode: 0,
                        ...data
                    }
                })
            }


        },
        mounted() {
            this.$axios({
                url: this.api,
                methods: "GET",
                params: {
                    action: "list",
                    params: {

                    }
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code == 0) {
                    this.list = res.data.data
                    this.page = res.data.page
                    this.pages = res.data.pages
                    this.total = res.data.total
                }
            }).finally(() => {
                this.pageLoading = false
            })
        }

    }
</script>

<style scoped="scoped">
    .list {
        margin-top: 0px;
        padding: 20px;
        padding-top: 10px;
    }

    .list-item {
        width: 100%;
        height: 100px;
        background-color: #fff;
    }

    .logo {

        width: 160px;
        height: 60px;
        background-color: #0081FF;

    }


    .search {
        height: 70px;
        background-color: #fff;
        margin-bottom: 1px;
        padding: 0px 15px;
        box-sizing: border-box;
    }

    .add-btn {
        width: 140px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: #fff;
        background-color: #2269F3;
        border-radius: 30px;
    }

    .add-btn /deep/ .el-dropdown {
        color: #fff;
        font-size: 10px;
    }
</style>
